import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
import _omit from "lodash/omit";
import _isEmpty from "lodash/isEmpty";

var _dec, _dec2, _dec3, _dec4, _class;

/**
 * @date 2019-03-05
 * @react
 * <DefaultMenu>
 *  <MainMenuItem>
 *    <SubMenuWrap>
 *      <SubMenu>
 *        <SubMenuItem />
 *      </SubMenu>
 *      <LeafMenu>
 *        <LeafMenuItemWrap>
 *          <LeafMenuItem />
 *        </LeafMenuItemWrap>
 *      </LeafMenu>
 *    </SubMenuWrap>
 *   </MainMenuItem>
 * </DefaultMenu>
 */

/**
 * update at 2019-09-03
 * 如果 只有二级菜单, 则不显示三级菜单, 这里保留三级菜单的结构(三级菜单高度计算需要)
 * 判断条件 subMenu.children.length === 1 && subMenu.children[0] === subMenu;
 */
import React from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { Bind } from 'lodash-decorators';
import MainMenuItem from "./MainMenuItem";
import { computeActiveMenus, computeMenus, getMenuKey, MenuContext } from "./utils";
import styles from "./styles.less?modules";
var omitProps = ['menus', 'activeTabKey', 'tabs', 'collapsed', 'className', 'language', 'dispatch', 'offsetTop' // 菜单距离顶部的高度
];
var DefaultMenu = (_dec = Bind(), _dec2 = Bind(), _dec3 = Bind(), _dec4 = Bind(), (_class = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(DefaultMenu, _React$PureComponent);

  var _super = _createSuper(DefaultMenu);

  function DefaultMenu(props) {
    var _this;

    _classCallCheck(this, DefaultMenu);

    _this = _super.call(this, props);
    var activeTabKey = props.activeTabKey,
        menus = props.menus;

    var _computeMenus = computeMenus(menus),
        computeLeafMenusRet = _computeMenus.leafMenus,
        computeMenusRet = _computeMenus.menus;

    _this.state = {
      activeMenus: [],
      // 激活的 Tab 对应的菜单
      menus: computeMenusRet,
      // 菜单
      leafMenus: computeLeafMenusRet,
      // 三级菜单
      prevActiveTabKey: activeTabKey,
      // 存储上一次的 activeTabKey
      prevMenus: menus,
      // 存储上一次的 menus
      activeMenu: null,
      // 当前激活的 一级菜单
      hoverMenu: null // 当前hover的 一级菜单

    };
    return _this;
  }

  _createClass(DefaultMenu, [{
    key: "handleMainMenuItemClick",
    value: function handleMainMenuItemClick(e, activeMenu) {
      e.stopPropagation();
      this.setState({
        activeMenu: activeMenu
      });
    }
  }, {
    key: "handleCancelActiveMenu",
    value: function handleCancelActiveMenu() {
      this.setState({
        activeMenu: null
      });
    } // FIXME: 换成标准 ICON(icon-font) 后 就不需要在 父组件 保存 hover 的menu 了

  }, {
    key: "handleMainMenuItemHover",
    value: function handleMainMenuItemHover(e, hoverMenu) {
      e.stopPropagation();
      this.setState({
        hoverMenu: hoverMenu
      });
    }
  }, {
    key: "handleCancelHoverMenu",
    value: function handleCancelHoverMenu() {
      this.setState({
        hoverMenu: null
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          collapsed = _this$props.collapsed,
          className = _this$props.className,
          language = _this$props.language,
          _this$props$offsetTop = _this$props.offsetTop,
          offsetTop = _this$props$offsetTop === void 0 ? 48 : _this$props$offsetTop,
          menuLoad = _this$props.menuLoad;
      var _this$state = this.state,
          menus = _this$state.menus,
          activeMenus = _this$state.activeMenus,
          activeMenu = _this$state.activeMenu,
          hoverMenu = _this$state.hoverMenu;

      var passProps = _omit(this.props, omitProps);

      var menuClassNames = [styles['main-menu'], 'cpaas-main-menu']; // 加上固定类名

      if (collapsed) {
        menuClassNames.push(styles['main-menu-collapsed'], 'cpaas-main-menu-collapsed');
      } // 加入固定的类名，方便后续切换主题


      var mainMenuWrapClassNames = [styles['main-menu-wrap'], className, 'cpaas-main-menu-wrap'];
      return /*#__PURE__*/React.createElement(React.Fragment, null, menuLoad ? /*#__PURE__*/React.createElement("div", Object.assign({}, passProps, {
        className: mainMenuWrapClassNames.join(' ')
      }), /*#__PURE__*/React.createElement("ul", {
        className: menuClassNames.join(' ')
      }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
        value: language
      }, menus.map(function (mainMenu) {
        return /*#__PURE__*/React.createElement(MainMenuItem, {
          onClick: _this2.handleMainMenuItemClick,
          onHover: _this2.handleMainMenuItemHover,
          onCancelHover: _this2.handleCancelHoverMenu,
          onSubMenuMaskClick: _this2.handleCancelActiveMenu,
          onLeafMenuClick: _this2.handleCancelActiveMenu,
          key: getMenuKey(mainMenu),
          menu: mainMenu,
          activeMenus: activeMenus,
          active: activeMenu === mainMenu,
          hover: hoverMenu === mainMenu,
          offsetTop: offsetTop
        });
      })))) : /*#__PURE__*/React.createElement(Spin, {
        size: "large",
        className: styles['main-menu-spin'],
        spinning: true
      }));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      var activeTabKey = nextProps.activeTabKey,
          menus = nextProps.menus;
      var prevActiveTabKey = prevState.prevActiveTabKey,
          prevMenus = prevState.prevMenus;
      var nextState = {};

      if (prevMenus !== menus) {
        if (_isEmpty(menus)) {
          nextState.leafMenus = [];
          nextState.menus = [];
        } else {
          // 还没有菜单
          var _computeMenus2 = computeMenus(menus),
              computeLeafMenusRet = _computeMenus2.leafMenus,
              computeMenusRet = _computeMenus2.menus; // 叶子节点 和 新的菜单


          nextState.leafMenus = computeLeafMenusRet;
          nextState.menus = computeMenusRet;
          nextState.activeMenus = computeActiveMenus(nextState.leafMenus, activeTabKey);
        }

        nextState.prevMenus = menus;
      }

      if (activeTabKey !== prevActiveTabKey && !nextState.activeMenus) {
        // 重新计算 激活的 menu
        nextState.activeTabKey = activeTabKey;
        nextState.activeMenus = computeActiveMenus(nextState.leafMenus || prevState.leafMenus, activeTabKey);
        nextState.prevActiveTabKey = activeTabKey;
      }

      return !_isEmpty(nextState) ? nextState : null;
    }
  }]);

  return DefaultMenu;
}(React.PureComponent), (_applyDecoratedDescriptor(_class.prototype, "handleMainMenuItemClick", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "handleMainMenuItemClick"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleCancelActiveMenu", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "handleCancelActiveMenu"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleMainMenuItemHover", [_dec3], Object.getOwnPropertyDescriptor(_class.prototype, "handleMainMenuItemHover"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleCancelHoverMenu", [_dec4], Object.getOwnPropertyDescriptor(_class.prototype, "handleCancelHoverMenu"), _class.prototype)), _class));
export default connect(function (_ref) {
  var _ref$global = _ref.global,
      global = _ref$global === void 0 ? {} : _ref$global;
  return {
    language: global.language,
    menus: global.menu,
    menuLoad: global.menuLoad,
    activeTabKey: global.activeTabKey,
    tabs: global.tabs
  };
})(DefaultMenu);